<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>购物车</title>
  <style>
    thead {
      background-color: #f5f5f5;
    }

    th,
    td {
      border: 1px solid #aaa;
      padding: 8px 12px;
      text-align: center;
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>编号</th>
        <th>书籍名称</th>
        <th>出版日期</th>
        <th>价格</th>
        <th>购买数量</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <h2 class="price">总价格:¥<span class="price-count">0</span></h2>
  <script>
    //1.先拿到数据
    let books = [
      {
        id: 1,
        name: '《算法导论》',
        date: '2006-09',
        price: 85.0,
        count: 3,
      },
      {
        id: 2,
        name: '《UNIX编程艺术》',
        date: '2006-02',
        price: 59.0,
        count: 2,
      },
      {
        id: 3,
        name: '《编程珠玑》',
        date: '2008-10',
        price: 39.0,
        count: 5,
      },
      {
        id: 4,
        name: '《代码大全》',
        date: '2006-03',
        price: 128.0,
        count: 8,
      },
    ];

    let tbody = document.querySelector("tbody");
    let priceCount = document.querySelector(".price-count");

    // 将数据渲染到页面
    books.forEach((ele, index) => {
      tbody.innerHTML += `
      <tr>
        <td>${ele.id}</td>
        <td>${ele.name}</td>
        <td>${ele.date}</td>
        <td>${ele.price}</td>
        <td>${ele.count}</td>
        <td>
          <button class="del">删除</button>
        </td>
      </tr>
      `;
    });

    // 删除
    tbody.addEventListener("click", e=>{
      if (e.target.className === "del") {
        e.target.parentElement.parentElement.remove();
      }
      let trArr = [...tbody.children];
      fn(trArr);
    });

    // 总价
    let trArr = [...tbody.children];
    fn(trArr);

    // “计算总价函数”
    function fn(Arr) {
      let res = Arr.reduce((prev, ele) => {
        return prev + Number(ele.children[3].innerHTML) * Number(ele.children[4].innerHTML);
      }, 0);
      priceCount.innerHTML = res;
    }
    
    // let res = trArr.reduce(function (prev, ele) {
    //     return prev + Number(ele.children[3].innerHTML) * Number(ele.children[4].innerHTML);
    //   }, 0);
    //   // console.log(res);
    //   priceCount.innerHTML = res;

  </script>
</body>

</html>